<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    省:
    <select id="pre">
        <option>请选择</option>
    </select>
    市:
    <select id="city">
        <option>请选择</option>
    </select>
    区:
    <select id="area">
        <option>请选择</option>
    </select>
    <script>
        var pres=["江苏","浙江"];
        var cities=[
            ["南京"],["无锡"],["杭州"],["义乌"]
];
        var areas=[
            [["六合"]],[["大厂"]],
        [["锡山"]],[["惠山"]],
        [["下沙"]],[["文二"]],
        [["徐汇"]],[["西湖"]]
    ];
        //获取省份城市区域对象
        var preObj=document.getElementById("pre");
        var cityObj=document.getElementById("city");
        var areaObj=document.getElementById("area");
        //插入省份
        for(i=0;i<pres.length;i++){
            var option=new Option(pres[i],i);
            preObj.options[i+1]=option;
        }
        //插入城市
        preObj.onchange=function(){
            //清除cityObj中的options，保留请选择项
            cityObj.options.length=1;
            for(i=0;i<cities.length;i++){
                var option=new Option(cities[i],i);
                cityObj.options[i+1]=option;
            }
        }
        //插入区域
        cityObj.onchange=function(){                   //事件 event 有名称，有事件发生时，会执行一段代码，可以使用一段函数来表示一段代码
            areaObj.options.length=1;                  //常用事件click dbclick mouseup keyup change blur focus touch
            for(i=0;i<areas.length;i++){             //事件对应一个方法、函数，onclick onchange onmousemove
                var option=new Option(areas[i],i);
                areaObj.options[i+1]=option;
            }
        }
        </script>                           
</body>
</html>